<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/header.jsp"%>
<title>图片维护</title>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>上传图片</legend>
		<div class="layui-upload">
			<button type="button" class="layui-btn layui-btn-normal"
				id="testList">选择多文件</button>
			<button type="button" class="layui-btn" id="testListAction">提交</button>
			<div class="layui-upload-list">
				<table class="layui-table">
					<thead>
						<tr>
							<th>文件名</th>
							<th>大小</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="demoList"></tbody>
				</table>
			</div>
		</div>
	</fieldset>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>图片列表</legend>
		<div class="layui-upload-list">
			<table class="layui-table">
				<thead>
					<tr>
						<th>文件名</th>
						<th>图片</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="demoList2"></tbody>
			</table>
		</div>
	</fieldset>
	<script type="text/javascript">
var code = '<%=request.getParameter("code")%>';
  //多文件列表示例
var demoListView = $('#demoList')
var uploadListIns = upload.render({// 渲染upload上传模块-+
	
    elem: '#testList'// 渲染哪个按钮
    ,url: base.app + '/img/upload.do'//上传接口 java端（servlet/controller）
    ,data: {code:code}
    ,accept: 'images'//指定允许上传时校验的文件类型 images(图片),file(所有文件),video(视频)、autio(音频)
    ,multiple: true//可多选
    ,auto: false//是否自动上传
    ,bindAction: '#testListAction'//绑定一个动作
    ,choose: function(obj){ //选择文件  
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'</td>'
          ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
          ,'<td>等待上传</td>'
          ,'<td>'
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
          ,'</td>'
        ,'</tr>'].join(''));
        //arrayObject.join(separator)
        //join()方法用于把数组中的所有元素放入一个字符串
        //元素是通过指定的分隔符进行分隔的。
        //sparator可选。指定要使用的分隔符。如果省略该参数，则用逗号作为分隔符。
        
        //单个重传
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
          init();
        });
        
        //删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
        });
        
        demoListView.append(tr);
      });
    }
    ,done: function(res, index, upload){
      if(res.code == 0){//上传成功后执行的方法
    	init();
        var tr = demoListView.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        tds.eq(3).html(''); //清空操作
        return delete this.files[index]; //删除文件队列已经上传成功的文件
      }
      this.error(index, upload);
    }
    ,error: function(index, upload){
      var tr = demoListView.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
  });
init();
function init(){
	ajax({code:code}, '/img/getImg.do', 'json', function(data){
		var html = ''
		$.each(data,function(i,dom){
			var id = dom.id
			html += "<tr><td>" + dom.url + "</td><td>"
				+ '<img src="/image/' + dom.url + '" alt="' + dom.url + '" class="layui-upload-img">'
				+ "</td><td>"
				+ "<button class='layui-btn layui-btn-danger' onclick='delPic(\"" + dom.code + "\",\"" + dom.url +"\" )'><i class='layui-icon layui-icon-delete'></i></button>"
				if(dom.type=='1'){
					html += "<input type='button' class='layui-btn' onclick='void()' value='主图'>"		
				}else{
					html += "<input type='button' class='layui-btn' onclick='setMain(\"" + dom.code + "\",\"" + dom.url +"\",\"" + dom.type +"\" )' value='设为主图'>"		
				}
				html += "</td></tr>"
		})
		$("#demoList2").html(html)
		upload.render();
	})
}
//删除
function delPic(code, url){
	layer.confirm("确定要进行该操作吗？",{icon: 3, title:'提示'},function(index){
		ajax({url:url},'/img/imgDel.do', 'text', function(data){
			if("1" == data){
				layer.msg("删除成功")
			}else{
				layer.msg("删除失败")
			}
			init();
		})
	})
}
//设置主图
function setMain(code, url, type){
	ajax({code:code, url:url, type:type},'/img/setMain.do', 'text', function(data){
		if("1" == data){
			layer.msg("设置成功")
		}else{
			layer.msg("设置失败")
		}
		init();
	})
}
</script>

</body>
</html>